<script setup lang="ts">
import { ref } from 'vue';
import { useFoodStore } from '../stores/counter';
import Compare from '../components/Compare.vue';


const active = ref<number>(0)
const foodStore = useFoodStore()

if(foodStore.compareList.length === 0) {
  foodStore.getFoods()
}









</script>

<template>
  <h1>食物健康测评</h1>
  <div class="home">
    <div class="data">
      <div class="type">
        <div class="type-name" v-for="(item,index) in foodStore.title" :key="item.name">
          <p 
          :class="{active:index === active}"
          @click="active = index"
          >{{ item.name}}</p>
        </div>
      </div>
      <div class="list">
        <ul class="item-list">
            <li 
            v-for="item in foodStore.title[active]?.list" 
            :key="item.category_id" 
            :class="['item',{ curActive:item.isChecked}]"
            @click="foodStore.addFood(item.name)" 
            >
              <img :src="item.imgUrl" alt="">
              <h4>{{ item.name }}</h4>
            </li>
        </ul>
      </div>
    </div>
    <Compare v-if="foodStore.compareList.length > 0"/>
  </div>




</template>

<style lang="scss" scoped>
.home{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.data{
  display: flex;
  flex: 1;
  overflow: auto;
}

.type{
  // width: 100%;
  height: 100%;
  .type-name{
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background: #EFEFEF;
   border-bottom: 1px solid #ccc;
  }
}
.list{
  flex: 1;
  .item-list{
  display: flex;
  flex-wrap: wrap;
  }
  .item{
  width: calc(100% / 3);
  text-align: center;
  padding: 0 5px;
  background: #eee;
  img{
    width: 100%;
    height: 80px;
    object-fit: cover;
  }
  }
}
.active{
  background: #fff;
}
.curActive{
  img{
    border: 2px solid tomato;
  }
}


</style>
